好想大聲說: 我完賽啦!

2024 iThome 鐵人賽

DAY 30

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 30 篇

16th鐵人賽

YUAN

2024-09-27 00:55:39

142 瀏覽

分享至

完賽心得

這次是第二年參賽，參賽主題選擇了 JavaScript 實際上主題比較符合 ModernWeb
文章盡可能地附上一些 vallinaJS MVP ( Minimum Viable Product)

“香草（vanilla）”是冰淇淋中最基本、最簡單的口味，開發者使用“Vanilla JS”來比喻那些不使用任何框架或外部庫的基本 JavaScript 程式碼。

這樣的範例不會被框架綁住~

每個專案其實都是非常多小功能堆疊出來的，筆者蠻喜歡收集一堆小範例
這些範例讓我在複習時不用花太多時間就能很好理解各種用法&語法

希望這系列讓想快速理解的讀者有幫助囉~

參加鐵人賽的每位參賽者，無論文章長短，願意站出來分享心得和經驗，都是非常值得鼓勵的！感謝這些願意花費個人時間，主動撰寫文章並傳承給後輩的前輩們。

只要文章能讓一部分人從中學到新知識，這樣的分享就是充滿價值的。再次感謝每一位參賽者的努力與貢獻！

文章列表

文章	tag	DAY	demo URL
PM 說: 網頁要怎麼客製化右鍵選單(menu)?	contextmenu (google 地圖)	1	demo
PM 說: 要怎麼寫一個免費的網頁地圖?	leaflet	2	demo
PM 說: 要怎麼寫出公車路線圖(網頁地圖)?	leaflet (台中等公車)	3	demo
PM 說: 要怎麼寫外送平台的移動地圖抓地址?	leaflet (foodpanda-抓地址)	4	demo1 demo2
PM 說: 客戶要做出"反向雷達圖" Σ ヽ(ﾟ Д ﾟ; )ﾉ	chartjs	5	demo1 demo2
PM 說: 要怎麼寫出客製化 window 視窗來比對資料?	window.open (shopee)	6	demo
PM 說: 要怎麼寫出 ISBN 條碼和帳單上的一維條碼?	電子帳單一維條碼, ISBN	7	demo
PM 說: 要怎麼防止用戶沒存檔手滑關閉網頁?	web-life-cycle (gmail 關閉提示)	8	demo
PM 說: 很多表格的 A4 表單 AI 能幫忙切版嗎?	print A4	9	demo
PM 說: 可以嵌入其他人的網頁並控制滾動軸嗎?	scroll iframe	10	demo1 demo2
PM 說: 嵌入 Youtube 影片可以監聽播放完畢嗎?	youtube	11	demo1
PM 說: 為什麼網頁不能一開啟就自動播放聲音?	autoplay	12	demo
PM 說: 要怎麼在手機上監聽前端 console 以及 API 資訊?	vconsole 📱	13	demo
PM 說: 要怎麼用網頁實現`ios滑動出現刪除按鈕`的效果?	swipe button ios📱	14	demo
PM 說: 要怎麼監聽網頁切換到背景?	visibility (IG 影片播放)	15	demo
我想跟教練說: 網頁開啟 App 其實很麻煩	open app 📱	16	demo
PM 說: 怎麼做出卡片的拖曳排序?	card sort📱	17	demo
PM 說: App 上常見的`可拖曳底部區`叫做什麼? 可以用網頁實現嗎?	App bottom sheet	18	demo
PM 說: 身分證在前端加上浮水印如何實現?	身分證浮水印	19	demo
小說:《前端工程師的冒險：圖片渲染四大技能》	小說	20	-
PM 說: 你有聽過網頁的影像地圖嗎?	taiwan-img-map	21	demo
PM 說: 怎麼在網頁上嵌入 PDF?	pdf-embed	22	demo
PM 說: 怎麼在網頁顯示數學公式 or 化學式?	LaTex	23	demo
PM 說: 很常在網頁上看到線條粒子特效的背景是哪個套件?	particle	24	demo
PM 說: 可以用網頁實現機上盒的 App 操作 UI 嗎?	set-top box	25	demo1 demo2
前端工程師說: 可以推薦用 js 寫爬蟲的套件嗎?	cheerio	26	-
PM 說: Line Notify 免費的限制是什麼?	Line Notify	27	-
PM 說: 前端怎麼知道網路斷線?	web online	28	demo
前端工程師說: 部署 Node.js 到 Vercel 怎麼設定變數?	Vercel	29	repo
好想大聲說: 我完賽啦!	🍰	30	-